<div class="card">
  <div class="card-body">
    <div class="tab-pane">
      <div class="row mb-3">
        <div class="col-3">
          <label class="form-label">Friendly Title</label>
        </div>
        <div class="col-9">
          <input
            type="text"
            class="form-control"
            ng-model="$ctrl.post.seoTitle"
          />
          <small class="text-muted form-text">
            Google displays the entire title on the search results, which has 63
            characters.
          </small>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-3">
          <label class="form-label">Meta Description</label>
        </div>
        <div class="col-9">
          <textarea
            class="form-control"
            ng-model="$ctrl.post.seoDescription"
            rows="3"
          ></textarea>
          <small class="text-muted form-text">
            We recommend descriptions between 50–160 characters.
          </small>
          <!-- <input type="text" class="form-control"> -->
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-3">
          <label class="form-label">Friendly URL</label>
        </div>
        <div class="col-9">
          <input
            class="form-control"
            type="text"
            ng-model="$ctrl.post.seoName"
          />
          <small class="text-muted form-text">
            <p>
              Easy to read: Users and search engines should be able to
              understand what is on each page just by looking at the URL.
            </p>
            <p>
              Keyword-rich: Keywords still matter and your target queries should
              be within URLs. Just be wary of overkill; extending URLs just to
              include more keywords is a bad idea.
            </p>
            <p>
              Consistent: There are multiple ways to create an SEO-friendly URL
              structure on any site. It’s essential that, whatever logic you
              choose to follow, it is applied consistently across the site.
            </p>
          </small>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-3">
          <label class="form-label">Meta Keywords</label>
        </div>
        <div class="col-9">
          <textarea
            class="form-control"
            ng-model="$ctrl.post.seoKeywords"
            rows="3"
          ></textarea>
          <small class="text-muted form-text">
            Do make sure your most important keywords for the webpage show up in
            the meta description. Often search engines will highlight in bold
            where it finds the searchers query in your snippet.
          </small>
          <!-- <input type="text" class="form-control" ng-model="$ctrl.post.seoKeywords"> -->
        </div>
      </div>
    </div>
  </div>
</div>
